<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>前端组件化</title>
    <script type="text/javascript" src="vue.js"></script>
</head>

<body>
    <!-- 
		注意：
			1：通过:count="0"或者v-bind:count='0'里面的0是Number类型的，因为引号里边是js表达式
			2：通过count="0"传入的子组件的0是正常的String类型的数据
				类似的还有class="count",里边的count就是样式表中定义的count类，
				而:class="count"有冒号或者v-bind:class="count"，里面的count 就相当于dada里面的数据变量
			3：通过父组件传递的数据，在子组件中用props进行接收，如count是不能在子组件中进行更改的，因为如果父组件传入的值count是对象的引用，子组件中进行更改会造成其它组件用到count也会受到影响；
			4：一般是把传入的值复制一份给data值，直接操作data里面的属性变量number


			5:子组件向父组件传值时，是通过this.$emit("change",val1,val2),其中change是自定义的监听函数
				在子组件<counter @change="changeclick"></counter>进行监听，而监听函数接收的参数changeclick: function(val1, val2) {}，和$emit参数是对应的



	 -->
    <div id="app">
        <counter @change="changeclick" :count="3" class="count"></counter>
        <counter @change="changeclick" :count="2"></counter>
        <div>{{total}}</div>
    </div>
    <script type="text/javascript">
    var counter = {
        template: "<div @click='handleClick'>{{number}}</div>",
        props: ["count"],
        data: function() {
            return {
                number: this.count,
            }
        },
        methods: {
            handleClick: function() {
                this.number += 2;
                this.$emit("change", 2, "dkhg");
            }
        }
    }
    var vm = new Vue({
        el: "#app",
        components: {
            counter: counter
        },
        data: {
            total: 5
        },
        methods: {
            changeclick: function(step, vv) {
                console.log(step, vv);
                this.total += step;

            }

        }
    });
    </script>
</body>

</html>